<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inline EditForm 内嵌表单编辑器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="../../scripts/boot.js"></script>
    <style type="text/css">
        .New_Button, .Edit_Button, .Delete_Button, .Update_Button, .Cancel_Button {
            font-size: 11px;
            color: #1B3F91;
            font-family:Verdana;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<h1>Inline EditForm 内嵌表单编辑器</h1>
<div id="datagrid" class="mini-datagrid" style="width: 700px;height: 300px;" url="../../Employee?method=searchEmployees"
     idField="id" emptyText="数据为空，<a href='javascript:newRow()'>增加一条</a>" showEmptyText="true" allowResize="true"
     showSortIcon="true" ><!--sortFieldField = "sort" sortOrderField = "order"-->
    <div property="columns">
        <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer"
             cellStyle="padding:0;">#</div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
        <div field="gender" width="100" headerAlign="center" renderer="onGenderRenderer">性别</div>
        <div field="age" width="100" headerAlign="center" allowSort="true">年龄</div>

        <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期</div>
        <div field="createtime" width="100" allowSort="true" dateFormat="yyyy-MM-dd">创建日期</div>

    </div>
</div>
<div id="editForm" style="display: none;padding: 5px;position: relative;">
    <input class="mini-hidden" name="id"/>
    <table style="width: 100%;">
        <tr>
            <td style="width: 80px;">员工帐号：</td>
            <td style="width: 150px;"><input name="loginname" class="mini-textbox"/></td>
            <td style="width: 80px;">姓名：</td>
            <td style="width: 150px;"><input name="name" class="mini-textbox"/></td>
            <td style="width: 80px;">薪资：</td>
            <td style="width: 150px;"><input name="salary" class="mini-textbox"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input name="gender" class="mini-combobox" data="Genders"/></td>
            <td>年龄：</td>
            <td><input name="age" class="mini-spinner"/></td>
            <td>出生日期：</td>
            <td><input name="birthday" class="mini-datepicker"/></td>
        </tr>
        <tr>
            <td style="text-align: right;padding-top: 5px;padding-right: 20px;" colspan="6">
                <a class="Update_Button" href="javascript:updateRow();">Update</a>
                <a class="Update_Button" href="javascript:cancelRow();">Cancel</a>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var Genders = [{id: 1, text: '男'}, {id: 2, text: '女'}]
    mini.parse();
    var grid = mini.get("datagrid");
    var editForm = document.getElementById("editForm");

    // var order = [true, false];

    grid.load();
    grid.sortBy("createtime", "desc");
    
    function onGenderRenderer(e) {
        for (var i = 0; i < 2; i++) {
            var g = Genders[i];
            if (g.id == e.value) {
                return g.text;
            }
        }
        return "";
    }

    function onActionRenderer(e) {
        var grid = e.sender;
        var record = e.record;
        var uid = record._uid;
        var rowIndex = e.rowIndex;

        var s = '<a class="New_Button" href="javascript:newRow()">New</a>'
                +'<a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')">Edit</a>'
                +'<a class="Delete_Button" href="javascript:delRow(\'' + uid + '\')">Delete</a>';
        return s;
    }
    
    function newRow() {
        var row = {};
        grid.addRow(row, 0);

        editRow(row._uid);
    }
    
    function editRow(row_uid) {
        var row = grid.getRowByUID(row_uid);
        if (row) {
            grid.hideAllRowDetail();
            grid.showRowDetail(row);

            var td = grid.getRowDetailCellEl(row);
            td.appendChild(editForm);
            editForm.style.display = "";

            //表单加载员工信息
            var form = new mini.Form("editForm");
            if (grid.isNewRow(row)) {
                form.reset();
            } else {
                form.loading();
                $.ajax({
                    url: "../../Employee?method=findEmployeesById&id=" + row.id,
                    success: function (text) {
                        var o = mini.decode(text);
                        form.setData(o.data);
                        form.unmask();
                    }
                });
            }
            grid.doLayout();
        }
    }
    
    function delRow(row_uid) {
        var row = grid.getRowByUID(row_uid);
        if (row) {
            if (confirm("确定删除此记录？")) {
                grid.loading("删除中，请稍后......");
                $.ajax({
                    url: "../../Employee?method=deleteEmployeeById&id=" + row.id,
                    success: function (text) {
                        grid.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseText);
                    }
                })
            }
        }
    }
    
    function cancelRow() {
        grid.reload();
    }
    
    function updateRow() {
        var form = new mini.Form("editForm");

        var o = form.getData();
        grid.loading("保存中，请稍后......");
        var data = mini.encode([o]);

        $.ajax({
            url: "../../Employee?method=saveEmployees",
            type: "post",
            data: {data: data},
            success: function (text) {
                grid.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });

        
    }

</script>
</div>
</body>

</html>